<template>
  <!-- <div class="w"> -->
  <div class="indexBox w">
    <div class="timing">{{ timeNow }}</div>
    <div class="third">
      <!-- </div> 请假待审批 今日到岗 今日在建-->
      <Card style="width:32%;margin-right: 2%;" :bordered="false">
        <div style="display: flex; width: 100%;">
          <div style="width: 50%;">
            <div>今日到岗</div>
            <span>{{ attendanceNum }}</span>
          </div>
          <div style="width: 50%;">
            <div>今日出勤率</div>
            <span v-if="totalNum!==0">{{ (attendanceNum / totalNum).toString().slice(0, 5) }}%</span>
          </div>
        </div>
        <img src="../../assets/attention.png" alt="" class="pics">
      </Card>
      <Card style="width:32%;margin-right: 2%;" :bordered="false">
        <div>
          <div>今日在建</div>
          <span>{{notFinished}}</span>
        </div>

        <img src="../../assets/building.png" alt="" class="pics">
      </Card>
      <Card style="width:32%;" :bordered="false">
        <div>
          <div>请假待审批</div>
          <span>{{ absentNum }}</span>
        </div>
        <img src="../../assets/takeoff.png" alt="" class="pics">
      </Card>
    </div>
    <div class="mid">
      <Card style="height: 100%;" :bordered="false">
        <h3><span>出勤情况</span>
          <Tooltip content="仅展示近七天数据">
            <Icon type="ios-information"></Icon>
          </Tooltip>
        </h3>
        <div class="attendance"></div>
      </Card>
    </div>
    <div class="worker">
      <Card class="worker_box" style="margin-right: 2%;">
        <h3>项目构成</h3>
        <div class="constitute"></div>
        <div class="constitute_worker">
          <span>A级工程人数<div>{{projectLevel.A}}</div></span>
          <span>B级工程人数<div>{{projectLevel.B}}</div></span>
          <span>C级工程人数<div>{{ projectLevel.C }}</div></span>
          <span>D级工程人数<div>{{ projectLevel.D }}</div></span>
        </div>
      </Card>
      <Card class="worker_box">
        <h3>每日体温</h3>
        <div class="tem_worker"></div>
      </Card>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import {getAbsence} from "@/api/absence/absence";
import dayjs from "dayjs";
import {getAttendance, getInfo} from "@/api/attendance/attendance";
import {getAll} from "@/api/employee/employee";
import {getDay} from "@/api/health/health";
import {getNotFinish, projectLevel} from "@/api/project/project";

export default {
  name: 'IndexMain',
  data() {
    return {
      timeNow: moment().format('YYYY年MM月DD日 HH:mm'),
      temOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总数', '正常', '发烧']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//按部门
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '总数',
            type: 'bar',
            barWidth: '20%',
            data: [100, 120, 110, 93, 81, 94, 82]
          },
          {
            name: '正常',
            type: 'bar',
            barWidth: '20%',
            data: [88, 100, 100, 82, 80, 91, 77]
          },
          {
            name: '发烧',
            type: 'bar',
            barWidth: '20%',
            data: [12, 20, 10, 11, 1, 3, 5]
          }
        ]
      },
      workerOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '员工构成',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'A级'},
              {value: 735, name: 'B级'},
              {value: 580, name: 'C级'},
              {value: 484, name: 'D级'},
            ]
          }
        ]
      },
      attenOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['正常', '迟到', '早退', '缺勤', '请假']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '正常',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '迟到',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '早退',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '缺勤',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '请假',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      absentNum: 0,
      attendanceNum: 0,
      totalNum: 0,
      group: {},
      groupKey: [],
      groupValue: [],
      notFinished:0,
      projectLevel:{
        A:0,
        B:0,
        C:0,
        D:0
      },

    }
  },
  created() {
    getAbsence().then(res => {
      let data = res.data.data
      // get today
      let day = dayjs(new Date()).format('YYYY-MM-DD')
      this.absentNum = data.filter(item => {
        return  item.status === "0"; // dayjs(item.applyTime).format('YYYY-MM-DD') === day &&
      }).length
    })
    projectLevel().then(res => {
      let data = res.data.data
      for(let i=0;i<data.length;i++){
        this.projectLevel[data[i].code] = data[i].number
      }
    })

    getAttendance(null).then(res => {
      let data = res.data.data
      let day = dayjs(new Date()).format('YYYY-MM-DD')
      this.attendanceNum = data.filter(item => {
        return dayjs(item.startTime).format('YYYY-MM-DD') === day;
      }).length
    })
    getAll(null).then(res => {
      let data = res.data.data
      this.totalNum = data.length
    })



  },
  mounted() {

    this.timeStart = setInterval(() => {
      this.timeNow = moment().format('YYYY年MM月DD日 HH:mm')
    }, 30000)
    // 初始化渲染图表
    var tem = this.$echarts.init(document.querySelector('.tem_worker'))
    var worker = this.$echarts.init(document.querySelector('.constitute'))
    var atten = this.$echarts.init(document.querySelector('.attendance'))
    tem.setOption(this.temOption)
    worker.setOption(this.workerOption)
    atten.setOption(this.attenOption)
    getDay(dayjs(new Date()).format('YYYY-MM-DD')).then(res => {
      let data = res.data.data
      for (let i = 0; i < data.length; i++) {
        if (this.group[data[i].deptName] !== undefined) {
          this.group[data[i].deptName].push(data[i])
        } else {
          this.group[data[i].deptName] = [data[i]]
        }
      }
      this.groupKey = Object.keys(this.group)
      for (let i = 0; i < this.groupKey.length; i++) {
        let values = this.group[this.groupKey[i]]
        let data = [0, 0, 0]
        for (let j = 0; j < values.length; j++) {
          data[0]++
          if (values[j].symptom === '正常') {
            data[1]++
          } else {
            data[2]++
          }
        }
        console.log(data)
        this.groupValue.push(data)
      }
      this.temOption.xAxis[0].data = this.groupKey
      this.temOption.series[0].data = this.groupValue.map(item => {
        return item[0]
      })
      this.temOption.series[1].data = this.groupValue.map(item => {
        return item[1]
      })
      this.temOption.series[2].data = this.groupValue.map(item => {
        return item[2]
      })
      tem.setOption(this.temOption)

      let end = dayjs(new Date()).format('YYYY-MM-DD')
      let start = dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD')
      let params = {
        start: start,
        end: end
      }
      getInfo(params).then(res=>{
        let data = res.data.data
        data.map(item=>{
          item.day = dayjs(item.startTime).format('YYYY-MM-DD')
        })
        console.log(data)
        let tmp = {}
        for(let i=0;i<data.length;i++){
          if(tmp[data[i].day] === undefined){
            tmp[data[i].day] = [data[i]]
          }else{
            tmp[data[i].day].push(data[i]);
          }
        }
        let keys = Object.keys(tmp)
        let values = Object.values(tmp)
        // if(this.mapping.attendant_status.value === '正常') {
        //   this.mapping.attendant_status.value = 0
        // }else if(this.mapping.attendant_status.value === '迟到') {
        //   this.mapping.attendant_status.value = 1
        // }
        // else if(this.mapping.attendant_status.value === '早退') {
        //   this.mapping.attendant_status.value = 2
        // }
        // else if(this.mapping.attendant_status.value === '缺勤') {
        //   this.mapping.attendant_status.value = 3
        // }
        // else if(this.mapping.attendant_status.value === '请假') {
        //   this.mapping.attendant_status.value = 4
        console.log(tmp)
        let arr1 = new Array(keys.length).fill(0)
        let arr2 = new Array(keys.length).fill(0)
        let arr3 = new Array(keys.length).fill(0)
        let arr4 = new Array(keys.length).fill(0)
        let arr5 = new Array(keys.length).fill(0)
        for(let i=0;i<keys.length;i++){
          for(let j=0;j<values[i].length;j++){
            if(values[i][j].attendantStatus === "0"){
              arr1[i]++
            }else if(values[i][j].attendantStatus === "1"){
              arr2[i]++
            }else if(values[i][j].attendantStatus === "2"){
              arr3[i]++
            }else if(values[i][j].attendantStatus === "3"){
              arr4[i]++
            }else if(values[i][j].attendantStatus === "4"){
              arr5[i]++
            }
          }
        }
        this.attenOption.xAxis[0].data = keys
        this.attenOption.series[0].data = arr1
        this.attenOption.series[1].data = arr2
        this.attenOption.series[2].data = arr3
        this.attenOption.series[3].data = arr4
        this.attenOption.series[4].data = arr5
        atten.setOption(this.attenOption)
      })
    })
    getNotFinish().then(res=>{
      let data = res.data.data
      this.notFinished = data.length
    })
  },
  onBeforeUnmount() {
    clearInterval(this.timeStart)
    tem.dispose()
    worker.dispose()
    atten.dispose()
  },
}
</script>
<style scoped>
.indexBox {
  width: 1280px;
  height: 560px;
  /* display: flex; */
}

.w {
  width: 97%;
  margin: 0 auto;
}

.timing {
  font-size: 20px;
}

.third {
  width: 100%;
  height: 186px;
  display: flex;
}

.mid {
  width: 100%;
  height: 350px;
  margin: 25px 0;
}

.mid h3 {
  display: flex;
  justify-content: space-between;
}

.worker {
  width: 100%;
  height: 400px;
  display: flex;
}

.worker_box {
  width: 49%;
}


.tem_worker,
.attendance {
  width: 100%;
  height: 300px;
}

.constitute {
  height: 260px;
}

.constitute_worker {
  display: flex;
  width: 60%;
  flex-wrap: wrap;
}

.constitute_worker span {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.pics {
  bottom: 0;
  height: 100px;
  position: absolute;
  right: 0;
  width: 100px;
  opacity: 0.1;
}
</style>